<script setup lang='ts'>
import { useRoute,useRouter } from 'vue-router'
import {getDetail} from '../../api/detail'

import {reactive,ref, onMounted} from 'vue'
import type {iPro} from '../home/home'
import { showImagePreview,showToast } from 'vant';
import {useUserStore} from '../../stores/user'

import {getCartList,addCart} from '../../api/cart'

// 骨架屏一般是当数据请求成功后就应该去除掉
const isShowContent = ref(true)
setTimeout(()=>{
  isShowContent.value = false
}, 300)

const user = useUserStore()

const route = useRoute()

const router = useRouter()

const state: {
  detail: any
} = reactive({
  detail: {}
})
// console.log(route.query.proid);

getDetail(String(route.query.proid)).then(res => {
  console.log(res.data.data);
  res.data.data.banners = res.data.data.banners[0].split(',')
  state.detail = res.data.data
})

// ------------------- 图片预览 ----------------------
const my_index = ref(0)
function showImage(){
  showImagePreview({
    images: state.detail.banners,
    startPosition: my_index.value,
    onChange(index: number){
      // console.log('哈哈哈哈哈哈哈哈哈',index);
      my_index.value = index
    }
  })
}
function changeImage(index: number){
  setTimeout(()=>{
    my_index.value = index
  }, 300)
}

// ----------------- 视频播放 -------------------
const show = ref(false)
const videoRef = ref()
// 打开视频
function showVideo(){
  show.value = true
  // 开始播放
  if(videoRef.value){
    videoRef.value.play()
  }
  
}

function stop(){
  show.value = false
  // console.dir(videoRef.value);
  // 暂停播放
  videoRef.value.pause()
}

// -------------------- 打开客服 -----------------
function showMeiQia(){

  window._MEIQIA('metadata', {
    address: '杭州九堡地铁口', // 地址
    age: 18, // 年龄
    comment: '一个年轻且帅气的小伙子', // 备注
    email: '827381973@qq.com', // 邮箱
    gender: '男', // 性别
    name: '老吴', // 名字
    qq: '827381973', // QQ
    tel: '1868273819', // 电话
    weibo: '827381973', // 微博
    weixin: '827381973', // 微信
    contact: '827381973', // 联系人
  })

    // 显示聊天窗口
  window._MEIQIA('showPanel') 
}

// ---------------------- 加入购物车 ------------------------
function addCartClick(){
  if(user.loginState){
    // 有登录
    // console.log(user.userid,route.query.proid, 1);
    
    addCart({
      userid: user.userid,
      proid: String(route.query.proid),
      num: 1
    }).then(res => {
      showToast(res.data.message)
      getCartNum()
    })

  }else {
    // 没有登录
    router.push('/login')
  }
}


// ---------------- 获取购物车数量 ------------------
const cartCount = ref(0)

function getCartNum(){
  getCartList({
    userid: user.userid
  }).then(res => {
    // console.log(res.data);
    if(res.data.code == '200'){
      cartCount.value = res.data.data.length
    }else {

    }
    
  })
}
onMounted(()=>{
  getCartNum()
})

</script>
<template>
  <main class='box'>
    <header class='header'>
      <van-icon @click="$router.back()" class="left-icon" name="arrow-left" />
      详情
    </header>

    <!-- 骨架屏 -->
    <div v-if="isShowContent" style="padding: 30px">
      <van-skeleton title avatar :row="3" />
      
      <br><br>

      <van-skeleton>
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>
      </van-skeleton>

      <br>
      <br>

      <van-skeleton title avatar :row="3" />

      <br>
      <br>

      <van-skeleton>
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>
      </van-skeleton>
      <br><br>
      
    </div>
    <!-- 具体内容 -->
    <div v-else class='content'>
      
      <div class="swipe-box">
<van-swipe :initial-swipe='my_index' @change='changeImage' @click='showImage' class="my-swipe" :autoplay="3000" indicator-color="#f66">
        <van-swipe-item v-for="item in state.detail.banners" :key="item">
          <img class="banner" :src="item" alt="" />
        </van-swipe-item>


        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>

        

      </van-swipe>
        <!-- 打开视频按钮 -->
        <div class="video-btn" @click='showVideo'>
          <van-icon size='30' name="play" />
        </div>
      </div>
      
      
      <!-- 其他详情 -->
      <div class="cell">
          <h2> {{state.detail.proname}} </h2>
          <p>
            <span style="color: red"> 活动价：￥{{ state.detail.originprice * state.detail.discount * 0.1 }}  </span>
            &#x3000;&#x3000;
            <del>原价：￥{{state.detail.originprice}}</del>
          </p>
          <p>品牌： {{ state.detail.brand }} </p>
          <p>分类： {{ state.detail.category }} </p>
          <p class="desc"> {{ state.detail.desc}} </p>
      </div>


  <!-- 视频播放 -->
  <van-overlay :show="show" @click="stop">
    <video ref="videoRef" autoplay controls class="my-video" src="https://jvod.300hu.com/vod/product/f9332310-339c-4880-9d05-c7f27fceb61b/6bdcd1f5531c4b78a68f2d12e1204200.mp4"></video>
  </van-overlay>


<van-action-bar>
  <van-action-bar-icon @click="showMeiQia" icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" @click='$router.push("/cart")' :badge="cartCount" />
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" @click='addCartClick' text="加入购物车" />
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
    </div>
  </main>
</template>
<style scoped lang="scss">
.left-icon {
  float: left;
  line-height: 0.44rem;
  margin-left: 16px;
}
.my-swipe {
  width: 100%;
  height: 400px;
  position: relative;

  .banner {
    width: 100%;
    height: 100%;
  }
   .custom-indicator {
    position: absolute;
    right: 0px;
    bottom: 5px;
    padding: 5px 15px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }
  
}
.cell {
  padding: 12px;
  height: 3000px;

  .desc {
    line-height: 30px;
    font-size: 14px;
    font-weight: 500;
  }
}


.swipe-box {
  position: relative;

  .video-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: #f66;
    padding: 0 10px;
    border-radius: 15px;
  }
}
.my-video {
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
</style>